/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="box">
    <!-- 照片展示 -->
    <div class="photoSwipeBox">
      <PhotoSwipeBox></PhotoSwipeBox>
    </div>
    <!-- PDF展示modal -->
    <transition
      name="custom-classes-transition"
      enter-active-class="animated bounceInUp"
      leave-active-class="animated bounceOutDown"
    >
      <PDFCanvas v-if="showPDF" :PDFInfo="PDFInfo" :handlerPDF="handlerPDF"></PDFCanvas>
    </transition>
    <!-- 签名弹出框 -->
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeIn"
      leave-active-class="animated fadeOut"
    >
      <div class="image-dialog-background" v-show="showCanvas" ref="dialog">
        <div class="wrapper" ref="canvasBox">
          <div class="btns" ref="btns">
            <mt-button @click="handlerCanvas" type="primary" style="margin-right: 10px">关闭</mt-button>
            <mt-button @click="handlerCanvasClear" type="primary" style="margin-right: 10px">清除</mt-button>
            <mt-button @click="handlerCanvasSave" type="primary">确定</mt-button>
          </div>
          <canvas ref="canvas" class="signature-pad" width="100%" height="100%"></canvas>
        </div>
      </div>
    </transition>
    <div class="top">
      <NavBar :title="title">
        <router-link
          slot="left"
          :to="{path:'/taskList',query:{appname: urlParams.appname}}"
          style="width: 100%;text-align: center;"
        >
          <i class="iconfont icon-arrow-left" style="font-size: 20px;"></i>
        </router-link>
        <!-- <a @click="submit" v-if="data.isWorkflow == 1 && data.flows.isCheckAble" href="javascript:void(0)" slot="right" style="color: #fff; display: inline-block;width: 100%; height: 100%; text-align: center">提交</a> -->
      </NavBar>
    </div>
    <div :class="['middle', {'middle-all': !(data.flows && data.flows.buttons.length>0)}]">
      <!-- 展示区域 -->
      <div class="infoBox" v-if="data.item && data.item.content">
        <!-- <div class="header" v-if="data.item ? data.item.apply_name : false">
        <div class="left">
          <Head :name="data.item.apply_name" :width=36></Head>
        </div>
        <div class="right">
          <p class="name">{{data.item.apply_name}}</p>
          <p class="type">等待审核人审核</p>
        </div>
        </div>-->
        <ul class="infos">
          <li class="title">
            <i class="iconfont icon-xinxi1"></i>
            基础信息
          </li>
          <li
            class="list-row"
            v-for="(item,index) in detailData"
            :key="index"
            v-if="item.type === 'string'"
          >
            <p class="label">{{item.label}}</p>
            <p class="value">{{item.value}}</p>
          </li>
          <!-- 图片 -->
          <li
            class="list-row"
            v-for="(item,index) in detailData"
            :key="index"
            v-if="item.type === 'image'"
          >
            <p class="label">{{item.label}}</p>
            <p class="value">
              <img
                class="image"
                v-for="(j, k) in item.value"
                @click="showPhotoswipeBox(item)"
                :src="j.src"
                alt
                :key="k"
              >
            </p>
          </li>
          <!-- 文件 -->
          <!-- <li class="list-row">
          <p class="label">文件</p>
          <div class="value">
            <div class="fileBox" v-for="item in [1,2]" :key="item" @click="handlerPDF">
              <div class="left">
                <img src="../../../static/img/pdf.png" alt="">
              </div>
              <div class="right">
                <p class="name">中华人名共和国水污染防治实施细则.pdf</p>
                <p class="type">258.92KB</p>
              </div>
            </div>
          </div>
          </li>-->
          <!-- 图章 -->
          <div class="info-types" v-if="data.item.status == '-1' || data.item.status == '0'">
            <div class="text-one">待{{data.flows.curr_audtor_name}}</div>
            <div class="text-two">{{data.item.status == '-1' ? "提交": "审核"}}</div>
          </div>
        </ul>
      </div>
      <div class="actionInfo"></div>
      <!-- 处理审批流程 -->
      <div class="actionBox" v-if="data.isWorkflow == 1 && data.flows.isCheckAble">
        <Action
          :showCanvas="handlerCanvas"
          :signatureData="signatureData"
          :typesData="typesData"
          :data="data"
          :initDetailData="initDetailData"
          :horizontal="horizontal"
          ref="action"
        ></Action>
      </div>
      <!-- 审批流程(时间轴) -->
      <div class="timeLineBox" v-if="data && data.flows && data.flows.logs">
        <li class="title">
          <i class="iconfont icon-liucheng"></i>
          审批流程
        </li>
        <!-- <TimeLine :data="timeLineData"></TimeLine> -->
        <TimeLine :data="data && data.flows && data.flows.logs" :showImages="showImages" :handlerPDF="handlerPDF"></TimeLine>
      </div>
      <!-- 文件上传 -->
      <!-- <div class="upLoadWrap">
      <UpLoad></UpLoad>
      </div>-->
    </div>
    <div class="bottom" v-if="data.flows && data.flows.buttons.length>0">
      <ul>
        <li
          @click="submit(item.action)"
          v-for="(item,index) in data.flows.buttons"
          :key="index"
          :style="{width: getTypeWidth, color: getTypeColor(item)}"
        >{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar/NavBar.vue";
import Head from "../../components/Head/Head";
import TimeLine from "../../components/TimeLIne/TimeLine";
import Action from "./Action"; //处理审批模块
import PDFCanvas from "./PDFCanvas"; //PDF展示模块
import PhotoSwipeBox from "./PhotoSwipe"; //相册展示模块
// import PictureModel from "./PicturModel";
import SignaturePad from "signature_pad"; //签名模块
import UpLoad from "./UpLoad"; //上传模块
import PDFJS from "pdfjs-dist";
import { Cell, Popup, Indicator, MessageBox } from "mint-ui";
import { changeOrientation, getUrlAllParams } from "../../util/util.js";
import { reqTaskDetail } from "../../api"; //detail数据接口
// Core JS file
import PhotoSwipe from "photoswipe";
// UI JS file
import PhotoSwipeUI_Default from "photoswipe/dist/photoswipe-ui-default";

export default {
  data() {
    return {
      data: {}, //后台获取的完整数据
      title: "",
      urlParams: {},
      detailData: {},
      showCanvas: false,
      typesData: [], //处理动作
      showPDF: false,
      updateFileIds: [],
      horizontal: 0, //是横屏还是竖屏
      PDFInfo: {}, //PDF信息
      signatureData: "",
      imgData: [
        { src: "../../../static/img/testImage/1.jpeg", w: 600, h: 400 },
        { src: "../../../static/img/testImage/2.jpeg", w: 600, h: 400 },
        { src: "../../../static/img/testImage/3.jpeg", w: 600, h: 400 },
        { src: "../../../static/img/testImage/4.jpeg", w: 600, h: 400 },
        { src: "../../../static/img/testImage/5.jpeg", w: 600, h: 400 },
        { src: "../../../static/img/testImage/6.jpeg", w: 600, h: 400 }
      ],
      timeLineData: [
        {
          name: "陈国栋",
          type: { id: 0, text: "发起申请" },
          time: "11.09 18:29"
        },
        {
          name: "部门负责人",
          type: { id: 0, text: "部门审核" },
          time: "11.09 18:29"
        },
        {
          name: "管理员",
          type: { id: 1, text: "审批中", color: "orange" },
          time: "已等待14小时30分钟"
        }
      ]
    };
  },
  computed: {
    getTypeWidth: function() {
      const buttons = (this.data.flows && this.data.flows.buttons) || [];
      if (buttons.length === 1) {
        return "100%";
      } else {
        return 100 / buttons.length + "%";
      }
    }
  },
  methods: {
    resizeCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      var ratio = Math.max(window.devicePixelRatio || 1, 1);
      canvas.width = canvas.offsetWidth * ratio;
      canvas.height = canvas.offsetHeight * ratio;
      canvas.getContext("2d").scale(ratio, ratio);
      this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value
    },
    // 显示/关闭签字模块
    handlerCanvas() {
      this.showCanvas = !this.showCanvas;
      // this.resizeCanvas();

      setTimeout(() => {
        this.resizeCanvas();
      }, 300);
    },

    // 清除签字模块画布
    handlerCanvasClear() {
      this.signaturePad.clear();
    },
    // 保存签字模块数据并关闭画布
    handlerCanvasSave() {
      const data = this.signaturePad.toDataURL("image/png");
      const width = document.documentElement.clientWidth; //满屏宽度
      const height = document.documentElement.clientHeight; //满屏高度
      let horizontal;
      if (width < height) {
        horizontal = 0;
      } else {
        horizontal = 1;
      }
      this.signatureData = data;
      this.handlerCanvas();
      this.horizontal = horizontal;
    },
    handlerPDF(data) {
      console.log("data", data);
      this.PDFInfo = {
        name: data.title + data.imagetype,
        // URL: '/lihua2/uploads/20181121/41e057d1fd56f6d8590f49de233bea68.pdf'
        URL: data.url
      };
      this.showPDF = !this.showPDF;
    },
    // 初始化相册
    initPhotoswipe(index) {
      var pswpElement = document.querySelectorAll(".pswp")[0];
      var items = this.imgData;
      var options = {
        index: index || 0
      };
      // console.log('PhotoSwipeUI_Default', PhotoSwipeUI_Default.options)
      // PhotoSwipeUI_Default.shareEl = false;
      var gallery = new PhotoSwipe(
        pswpElement,
        PhotoSwipeUI_Default,
        items,
        options
      );
      //修改默认配置
      gallery.options.shareEl = false;
      gallery.init();
    },
    initSignaturePad() {
      // 初始化签字版
      const canvas = this.$refs.canvas;
      var signaturePad = new SignaturePad(canvas, {
        backgroundColor: "rgba(255, 255, 255, 0)",
        penColor: "rgb(0, 0, 0)"
      });
      this.signaturePad = signaturePad;
      this.resizeCanvas();
      window.addEventListener("resize", this.resizeCanvas);
    },
    // 基础信息的图片展示
    showPhotoswipeBox(item) {
      this.imgData = item.value;
      this.initPhotoswipe();
    },
    // 审批流程的图片展示
    showImages(images, index) {
      let result = [];
      images.map(item => {
        result.push({ src: item.url, w: item.w, h: item.h });
      });
      this.imgData = result;
      this.initPhotoswipe(index);
    },
    async initDetailData() {
      Indicator.open({
        spinnerType: "triple-bounce",
        text: "加载中.."
      });
      const result = await reqTaskDetail(
        { id: this.urlParams.id, moduleno: this.urlParams.moduleno },
        this
      );
      if (result.code == 1) {
        this.detailData = result.data.item.content;
        this.title = result.data.item.title;
        this.data = result.data;
        if (result.data.isWorkflow && result.data.flows) {
          console.log("保存button");
          console.log("result.data.flows.buttons;", result.data.flows.buttons);
          this.typesData = result.data.flows.buttons;
        }
      } else {
        // alert(result.msg);
        console.log("请求失败!");
      }
      Indicator.close();
    },
    submit(data) {
      this.$refs.action.submitAction(data);
    },

    getTypeColor(item) {
      const action = item.action;
      switch (action) {
        case "save":
          return "#5e8bff";
          break;
        case "reject":
          return "#ea4f4f";
          break;
        default:
          return "#00bf8f";
          break;
      }
    },
    handlerType(data) {
      console.log("跳转actiona页面!!");
    }
  },
  mounted() {
    this.urlParams = getUrlAllParams();
    const btns = this.$refs.btns;
    const canvasBox = this.$refs.canvasBox;
    changeOrientation($(btns));
    this.initSignaturePad(); //初始化签字板
    this.initDetailData(); //获取详情页数据
  },
  components: {
    NavBar,
    Cell,
    Popup,
    PDFCanvas,
    PhotoSwipeBox,
    UpLoad,
    Head,
    TimeLine,
    Action
  }
};
</script>

<style lang='less' scoped>
@import "../../util/themt.less";

.box {
  display: flex;
  flex-direction: column;
  background: #eee;
  height: 100%;
  .top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
  }
  .middle {
    background: @bg;
    position: fixed;
    overflow: auto;
    top: 46px;
    bottom: 46px;
    left: 0;
    right: 0;
    padding: 0 8px;
    .lists {
      background: #fff;
      margin: 10px 10px 10px;
      box-shadow: 4px 2px 6px @gray;
      padding: 5px;
      li {
        display: flex;
        p {
          display: inline-block;
          font-size: 13px;
          line-height: 30px;
          border-bottom: 1px solid @gray;
        }
        p:first-child {
          text-align: left;
          padding-left: 10px;
        }
        p:last-child {
          text-align: right;
          padding-right: 10px;
          flex: 1;
        }
      }
    }
  }
  .middle-all {
    bottom: 0;
  }
  // 信息展示部分样式
  .infoBox {
    padding: 0 10px 6px;
    background: #fff;
    margin-bottom: 8px;
    margin-top: 8px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    .boxShadow();
    .header {
      display: flex;
      align-items: center;
      padding: 10px 0;
      // border-bottom: 1px solid @grayLine;
      .left {
        flex: 0;
      }
      .right {
        flex: 1;
        padding-left: 10px;
        .name {
          height: 20px;
          font-size: 16px;
          display: table-row;
          vertical-align: top;
        }
        .type {
          height: 10px;
          font-size: 12px;
          display: table-row;
          vertical-align: bottom;
          color: orange;
        }
      }
    }
    .infos {
      .title {
        font-size: 15px;
        color: @font-regular;
        line-height: 30px;
        font-weight: 500;
      }
      // overflow: hidden;
      .list-row {
        display: flex;
        // letter-spacing:1px;
        padding: 6px 0;
        p {
          display: inline-block;
          font-size: 14px;
          line-height: 20px;
          vertical-align: top;
        }
        .label {
          width: 70px;
          max-width: 70px;
          min-width: 70px;
          flex: 0;
          color: #aaa;
          text-align: right;
          color: @font-secondary;
        }
        .value {
          flex: 1;
          padding-left: 12px;
          text-align: left;
          overflow: hidden;
          word-wrap: break-word;
          // word-wrap: no-wrap;
          // text-overflow:ellipsis;
          color: @font-primary;
          img {
            border-radius: 3px;
          }
          .image {
            width: 60px;
            height: 60px;
            margin-right: 3px;
            border-radius: 3px;
          }
          .fileBox {
            padding: 3px;
            background: #eee;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 3px;
            margin-bottom: 5px;
            .left {
              flex: 0;
              img {
                width: 30px;
                height: 30px;
              }
            }
            .right {
              flex: 1;
              padding-left: 10px;
              .name {
                display: block;
                line-height: 16px;
                font-size: 13px;
                vertical-align: top;
                white-space: nowrap;
                text-overflow: hidden;
                text-overflow: ellipsis;
              }
              .type {
                display: block;
                line-height: 14px;
                font-size: 12px;
                color: @gray;
              }
            }
          }
        }
      }
    }
    .info-types {
      .types-bg();
      width: 130px;
      height: 130px;
      // background-color: @primary;
      color: #fff;
      /* Rotate div */
      transform: rotate(45deg);
      -ms-transform: rotate(45deg); /* Internet Explorer */
      -moz-transform: rotate(45deg); /* Firefox */
      -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
      -o-transform: rotate(45deg); /* Opera */

      position: absolute;
      right: -65px;
      top: -65px;
      font-size: 14px;
      text-align: center;
      .text-one {
        position: absolute;
        bottom: 23px;
        width: 100%;
        text-align: center;
      }
      .text-two {
        position: absolute;
        bottom: 3px;
        width: 100%;
        text-align: center;
      }
    }
  }
  // 审批流程
  .timeLineBox {
    background: #fff;
    padding: 0px 10px 0;
    margin-bottom: 8px;
    border-radius: 4px;
    overflow: hidden;
    .boxShadow();
    .title {
      font-size: 15px;
      color: @font-regular;
      line-height: 30px;
      font-weight: 500;
      margin-bottom: 6px;
    }
  }
  //签名部分
  .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .signature-pad {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  // 签字模态框背景色
  .image-dialog-background {
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.95);
    text-align: center;
    z-index: 999;
  }
  //模态框内部样式
  .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .btns {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      z-index: 999999;
    }
  }
  // 相册列表
  .picWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0 0 8px;
    .imgBox,
    .pdfBox {
      flex: 1;
      box-sizing: border-box;
      margin: 0 8px 8px 0;
      overflow: hidden;
      height: 120px;
      position: relative;
      clear: both;
      display: flex;
      flex-direction: column;
      .imgs {
        border-radius: 5px;
        flex: 1;
        overflow: hidden;
        text-align: center;
        img {
          // display: flex;
          max-width: 100%;
          max-height: 100%;
          // justify-content: center;
          // align-items: center;
        }
      }
      .text {
        flex: 0 0 20;
        text-align: center;
        font-size: 12px;
        line-height: 20px;
      }
    }
  }
  .photoswipeBox {
    position: absolute;
    // display: flex;
  }
  .upLoadWrap {
    width: 100%;
    // height: 15vh;
    padding: 10px 5px;
  }
}

.bottom {
  position: fixed;
  height: 46px;
  bottom: 0;
  // top: -46px;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid @border-base;
  box-sizing: border-box;
  ul {
    width: 100%;
    height: 100%;
    li {
      display: inline-block;
      line-height: 45px;
      text-align: center;
      font-weight: 500;
    }
  }
}
</style>
